<template>
  <div>
    <my-header/>
    <nuxt/>
    <my-footer/>
  </div>
</template>

<script>
import MyFooter from '~/components/Footer.vue'
import MyHeader from '~/components/header.vue'

export default {
  components: {
    MyFooter,
    MyHeader
  }
}
</script>

<style lang="scss">
@import '../assets/css/mixins.scss';
.header{
  padding:10px;
  background: #494961;
  .logo{
    color:#fff;
    float:left;
    @include xsmall{
     
      text-align:left;
    } 
  }
  .about{
    float:left;
    margin-left:20px;
  }
  .header-nav{
    color:#fff;
    float: right;
     @include xsmall{
        float:none;
        text-align:center;
     }
  }
}
.button, .button:visited
{
  display: inline-block;
  color: black;
  letter-spacing: 1px;
  background-color: #fff;
  border: 2px solid #000;
  text-decoration: none;
  text-transform: uppercase;
  padding: 15px 45px;
}

.button:hover, .button:focus
{
  color: #fff;
  background-color: #000;
}

.title
{
  color: #000;
  font-weight: 300;
  font-size: 2.5em;
  margin: 0;
}
</style>
